<template>
  <div class="sub-menu-container">
    <div class="sub-left">博客</div>
    <div class="sub-right">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="changeIndex"
      >
        <el-menu-item index="created_time">最新</el-menu-item>
        <el-menu-item index="blog_goods">点赞最多</el-menu-item>
        <el-menu-item index="blog_comment">评论最多</el-menu-item>
        <el-menu-item index="blog_read">阅读最多</el-menu-item>
        <el-menu-item index="blog_collection">收藏最多</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // 当前选中的菜单
            activeIndex: 'created_time'
        }
    },
    methods: {
      // 菜单选中触发
      changeIndex(index) {
        this.activeIndex = index
        this.$emit('listenSort',this.activeIndex)
      }
    }
};
</script>

<style src="./sub-menu.css" scoped>
</style>